import React from 'react';
import { connect } from 'react-redux';
import BaseComponent from '../../components/common/baseComponent.js';

// import cardicon from '../../../assets/images/cq/gift/cardicon.png';
// import oilcardicon from '../../../assets/images/cq/gift/oilcardicon.png';

// import changea from '../../../assets/images/cq/gift/change-01.png';
// import changeb from '../../../assets/images/cq/gift/change-02.png';
import couponIcon from '../../../assets/images/cq/coupon/more_coupon.png';
import giftIcon from '../../../assets/images/cq/gift/gift.png';

import {
  // OLD_CARD_EXCHANGE,
  // OLD_COUPON_EXCHANGE,
  OLD_CQ_GIFT,
  OLD_SHELL_GIFT,
  OLD_COUPON_LIST, OLD_ORDER_LIST,
} from '../../constants/setting';

@connect(({ user }) => {
  return {
    sumGift: user.getIn(['gift', 'sum']),
    user: user.get('user'),
    couponAmount: user.getIn(['gift', 'couponAmount']),
    couponCount: user.getIn(['gift', 'couponCount']),
  };
})
class GiftCenter extends BaseComponent {
  state = {
    tabIndex: -1,
  }
  componentDidMount() {
    this.requestData();
  }

  requestData = () => {
    const { user } = this.props;
    if (user.get('token')) {
      this.props.dispatch({
        type: 'user/fetchSumGift',
      });
      this.props.dispatch({
        type: 'user/fetchUserCouponTotal',
      });
    }
  }

  clickTab = (tabIndex) => {
    this.setState({
      tabIndex,
    });
  }

  // goCardExchange = () => {
  //   window.location.href = OLD_CARD_EXCHANGE;
  // }
  //
  // goCouponExchange = () => {
  //   window.location.href = OLD_COUPON_EXCHANGE;
  // }

  goGiftCq = () => {
    window.location.href = OLD_CQ_GIFT;
  }

  goCouponList = () => {
    this.clickTab(1);
    window.location.href = OLD_COUPON_LIST;
  }

  goGiftShell = () => {
    window.location.href = OLD_SHELL_GIFT;
  }

  goMoreCoupon = () => {
    this.props.history.push('moreCoupon');
  }

  goOrderList = () => {
    this.clickTab(0);
    window.location.href = OLD_ORDER_LIST;
  }

  render() {
    const { tabIndex } = this.state;
    const { sumGift, couponAmount, couponCount } = this.props;
    return (
      <div className="gift-center-cq">
        <div className="gift-info-box">
          <div className="gift-info">
            <div className={`info-item ${tabIndex === 0 ? 'active' : ''}`} onClick={this.goOrderList}>
              <div className="item-text">{sumGift}<span>元</span></div>
              <div className="item-title">已为您省钱</div>
            </div>
            <div className={`info-item ${tabIndex === 1 ? 'active' : ''}`} onClick={this.goCouponList}>
              <div className="item-text">{couponCount}张优惠券可用</div>
              <div className="item-ctr">(价值{couponAmount}元)</div>
              <div className="item-title">我的卡券</div>
            </div>
            <div />
          </div>
        </div>
        <div className="change-src">
          {/*<div className="title">兑换优惠</div>*/}
          {/*<div className="chenge-tab">*/}
            {/*<div className="tab-item" onClick={this.goCardExchange}>*/}
              {/*<img className="oilcardicon" src={oilcardicon} alt="" />*/}
              {/*<div>油卡兑换</div>*/}
            {/*</div>*/}
            {/*<div className="tab-item" onClick={this.goCouponExchange}>*/}
              {/*<img className="cardicon" src={cardicon} alt="" />*/}
              {/*<div>卡券兑换</div>*/}
            {/*</div>*/}
          {/*</div>*/}
          <div className="plateTitle">活动中心</div>
          <div className="img-list">
            {/* <img src={changea} alt="" onClick={this.goGiftShell} />
            <img src={changeb} alt="" onClick={this.goGiftCq} /> */}
            {/* <img src={couponIcon} alt="" onClick={this.goMoreCoupon} /> */}
            <img src={giftIcon} alt="" onClick={this.goGiftCq} />
          </div>
        </div>
      </div>
    );
  }
}

export default GiftCenter;
